<template>
  <ConfigProvider
    :theme="{
      components: {
        Tabs: {
          lineWidth: 0,
        },
        Input: borderStyle,
        Select: borderStyle,
        InputNumber: borderStyle,
      },
    }"
  >
    <Tabs
      tab-position="left"
      v-model:activeKey="activeKey"
      destroyInactiveTabPane
    >
      <template #renderTabBar>
        <Flex vertical justify="space-between">
          <Collapse
            v-model:activeKey="collapseKey"
            ghost
            accordion
            class="tab-collapse"
            ><template v-for="(item, index) in panes">
              <CollapsePanel
                v-if="item.group.length"
                :key="index"
                :header="item.title"
              >
                <Space direction="vertical">
                  <Button
                    v-for="button in item.group"
                    :key="`button${button.key}`"
                    type="text"
                    block
                    :class="{ active: activeKey == button.key }"
                    @click="activeKey = button.key"
                    >{{ button.title }}</Button
                  >
                </Space>
              </CollapsePanel>
            </template>
          </Collapse>

          <!-- <div
            class="tab-left mb-2"
            v-for="button in panes"
            :key="`button${button.key}`"
          >
            <Button
              type="text"
              block
              :class="{ active: activeKey == button.key }"
              @click="activeKey = button.key"
              >{{ button.title }}</Button
            >
          </div> -->
        </Flex>
      </template>
      <template v-for="paneGroup in panes">
        <TabPane
          v-for="pane in paneGroup.group"
          :key="pane.key"
          :tab="pane.title"
        >
          <component
            :is="pane.content"
            :pageData="pageData"
            :fastConfig="pane.fastConfig"
            :logType="pane.logType"
          />
        </TabPane>
      </template>
    </Tabs>
  </ConfigProvider>
</template>
<script setup lang="tsx">
import { computed, markRaw, ref } from 'vue';
import {
  Button,
  Collapse,
  CollapsePanel,
  ConfigProvider,
  Flex,
  Space,
  TabPane,
  Tabs,
} from 'ant-design-vue';
import { borderStyle } from '@/constant/theme';
import ConfigLog from './LogTab/ConfigLog.vue';
import HistoryLog from './LogTab/HistoryLog.vue';
import QuickReportLog from './LogTab/QuickReportLog.vue';
import SelfCheckLog from './LogTab/SelfCheckLog.vue';
import SystemLog from './LogTab/SystemLog.vue';
import WarningLog from './LogTab/WarningLog.vue';
import WeatherLog from './LogTab/WeatherLog.vue';

interface Props {
  pageData: any;
}
const props = defineProps<Props>();
const collapseKey = ref(0);

const pane1 = [
  {
    title: '平台日志',
    group: [
      {
        title: '预警日志',
        key: 'warningLog',
        content: WarningLog,
      },
      {
        title: '速报日志',
        key: 'quickReportLog',
        content: QuickReportLog,
      },
      {
        title: '气象日志',
        key: 'weatherLog',
        content: WeatherLog,
      },
      {
        title: '自检日志',
        key: 'selfCheckLog',
        content: SelfCheckLog,
      },
      {
        title: '历史日志',
        key: 'historyLog',
        content: HistoryLog,
      },
    ],
  },
];

const pane2 = [
  {
    title: '设备日志',
    group: [
      {
        title: '预警服务',
        key: 'systemLog1',
        content: SystemLog,
        logType: '1',
      },
      {
        title: '管理服务',
        key: 'systemLog2',
        content: SystemLog,
        logType: '2',
      },
      {
        title: '文件服务',
        key: 'systemLog3',
        content: SystemLog,
        logType: '3',
      },
      {
        title: '定位服务',
        key: 'systemLog4',
        content: SystemLog,
        logType: '4',
      },
      {
        title: '对时服务',
        key: 'systemLog5',
        content: SystemLog,
        logType: '5',
      },
      {
        title: '设备服务',
        key: 'systemLog6',
        content: SystemLog,
        logType: '6',
      },
      {
        title: '烈度计服务',
        key: 'systemLog7',
        content: SystemLog,
        logType: '7',
      },
    ],
  },
];
const panes = computed(() => {
  if (props.pageData.onlineStatus != '1') return pane1;
  return pane1.concat(pane2);
});

// 当前选中的 Tab
const activeKey = ref(panes.value[0].group[0].key);
</script>
<style lang="scss" scoped>
:deep(.tab-flex) {
  position: fixed;
}

:deep(.ant-tabs-nav) {
  width: fit-content;
}
:deep(.ant-tabs-content-holder) {
  height: 64vh;
}

:deep(.ant-tabs-tabpane) {
  display: flex;
  flex-direction: column;
}

:deep(.ant-tabs-nav-wrap) {
  margin-top: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
  padding: 4px;
}

:deep(.ant-input-affix-wrapper) {
  padding: 4px 11px;
  border: 1px solid #dcdfe6 !important;
}
:deep(.ant-select-selector) {
  border: 1px solid #dcdfe6 !important;
}

:deep(.ant-btn.ant-btn-sm) {
  height: 32px;
}
:deep(.ant-card-body) {
  padding: 0 !important;
}
</style>
